<template>
  <div class="form-box">
    <a-form-model class="form" :model="form" style="overflow: hidden">
      <sectionTitle>基本详情</sectionTitle>
      <a-row>
        <a-col :span="18">
          <a-form-model-item label="年份" required>
            <a-input v-model="form.year" style="width: 100px" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="18">
          <a-form-model-item label="所属上级">
            <s-select
              size="large"
              :selectOption="superiorOption"
              v-model="form.superior"
            />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="18">
          <a-form-model-item label="名称">
            <a-input v-model="form.name" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="18">
          <a-form-model-item label="编号">
            <a-input v-model="form.serialNumber" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="18">
          <a-form-model-item label="状态">
            <a-radio-group v-model="form.state">
              <a-radio :value="1">正常</a-radio>
              <a-radio :value="0">禁止</a-radio>
            </a-radio-group>
          </a-form-model-item>
        </a-col>
      </a-row>
      <div class="form-footer">
        <a-button type="primary" @click="onSubmit">确定</a-button>
        <a-button style="margin-left: 10px" @click="$router.back()">
          返回
        </a-button>
      </div>
    </a-form-model>
  </div>
</template>
<script>
import sectionTitle from 'components/base/sectionTitle'
export default {
  components: { sectionTitle },
  data() {
    return {
      choiceVisible: false, //上报人弹框
      labelCol: { span: 4 },
      wrapperCol: { span: 16 },
      superiorOption: [
        { key: '', label: '无所属上级' },
        { key: '1', label: '街道文化建设' },
        { key: '2', label: '政协建设' },
        { key: '3', label: '文化建设' }
      ],
      form: {
        year: '2021',
        superior: '',
        name: '',
        serialNumber: '',
        state: 1
      }
    }
  },
  methods: {
    onSubmit() {
      console.log('submit!', this.form)
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .ant-calendar-picker-input {
  line-height: 40px;
}
.box-content {
  padding-right: 20px;
}
/deep/ .ant-select {
  color: #333;
  box-sizing: border-box;
  height: 40px;
  line-height: 40px;
}
/deep/ .ant-select-selection {
  border-radius: 2px;
  height: 40px;
}
/deep/ .ant-select-selection__rendered {
  line-height: 38px;
}
</style>